<script setup lang="ts">
import { ref, computed } from 'vue'
import type { BannerItem } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { getHomeBannerAPI } from '@/pages/index/request'
import { getCategoryAPI } from './request'
import type { CategoryTopItem } from '@/types/category'
// 高亮下标
const activeIndex = ref(0)
const bannerList = ref<BannerItem[]>([])
// 获取分类列表数据
const categoryList = ref<CategoryTopItem[]>([])
// 获取轮播图的数据
const getBannerList = async () => {
  const res = await getHomeBannerAPI(2)
  bannerList.value = res.result
}
// 获取分类数据
const getCategoryList = async () => {
  const res = await getCategoryAPI()
  categoryList.value = res.result
}
// tab二级分类,通过计算属性来拿到二级分类数据，如果没有数据就默认为空数组
const subCategory = computed(() => {
  return categoryList.value[activeIndex.value]?.children || []
})
onLoad(() => {
  getBannerList()
  getCategoryList()
})
</script>

<template>
  <view class="category">
    <!-- 搜索栏 -->
    <view class="search">
      <view class="input">
        <input id="uni-input-default" class="icon-search" value="女靴" />
      </view>
    </view>
    <!-- 分类 -->
    <view class="categories">
      <!-- 左--一级分类 -->
      <scroll-view class="primary" scroll-y>
        <view
          v-for="(item, index) in categoryList"
          :key="item.id"
          class="item"
          :class="{ active: index === activeIndex }"
          @tap="activeIndex = index"
        >
          <text class="name">{{ item.name }}</text>
        </view>
      </scroll-view>
      <!-- 右--二级分类 -->
      <scroll-view class="secondary" scroll-y>
        <!-- 轮播图 -->
        <XtxSwiper :list="bannerList" class="banner"></XtxSwiper>
        <!-- 内容区 -->
        <view class="pannel" v-for="item in subCategory" :key="item">
          <view class="title">
            <text class="name">{{ item.name }}</text>
            <navigator class="more" hover-class="none">全部</navigator>
          </view>
          <!-- 内容区 -->
          <view class="section">
            <navigator
              hover-class="none"
              :url="`/pages/goods/goods?id=${i.id}`"
              class="goods"
              v-for="i in item.goods"
              :key="i.id"
            >
              <image class="image" :src="i.picture"></image>
              <view class="name ellipsis">{{ i.name }}</view>
              <view class="price">
                <text class="symbol">¥</text>
                <text class="number">{{ i.price }}</text>
              </view>
            </navigator>
          </view>
          <view> </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.category {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.search {
  padding: 20rpx 30rpx 20rpx;
  background-color: #fff;
  input {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 64rpx;
    padding-left: 26rpx;
    color: #8b8b8b;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: #f3f4f4;
  }
}
.categories {
  flex: 1;
  min-height: 400rpx;
  display: flex;
  .primary {
    overflow: hidden;
    width: 180rpx;
    flex: none;
    background-color: #f6f6f6;
    .item {
      width: 100%;
      height: 96rpx;
      line-height: 96rpx;
      text-align: center;
      font-size: 26rpx;
      color: #595c63;
    }
    .active {
      background-color: #fff;
      border-left: 5px solid #27ba9b;
      // &::before {
      //   content: '';
      //   position: absolute;
      //   left: 0;
      //   top: 0;
      //   width: 8rpx;
      //   height: 100%;
      //   background-color: #27ba9b;
      // }
    }
  }
  .secondary {
    background-color: #fff;
    .banner {
      width: 100%;
      height: 200rpx;
      padding: 0 30rpx 0rpx;
      border-radius: 4rpx;
      overflow: hidden;
      box-sizing: border-box;
    }
    .pannel {
      width: 100%;
      padding: 0 30rpx 0rpx;
      box-sizing: border-box;
      .title {
        height: 60rpx;
        line-height: 60rpx;
        color: #333;
        font-size: 28rpx;
        border-bottom: 1rpx solid #f7f7f8;
        .more {
          float: right;
          padding-left: 20rpx;
          font-size: 24rpx;
          color: #999;
        }
      }
      .more {
        &::after {
          font-family: 'erabbit' !important;
          content: '\e6c2';
        }
      }
    }
    .section {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 20rpx 0;

      .goods {
        width: 150rpx;
        margin: 0rpx 30rpx 20rpx 0;
        image {
          width: 150rpx;
          height: 150rpx;
        }
        .name {
          padding: 5rpx;
          font-size: 22rpx;
          color: #333;
        }
        .price {
          padding: 5rpx;
          font-size: 18rpx;
          color: #cf4444;
        }
        .number {
          font-size: 24rpx;
          margin-left: 2rpx;
        }
      }
      .goods:nth-child(3n) {
        margin-right: 0rpx;
      }
    }
  }
}
</style>
